<template>
	<div class="admin-wiki" v-if="async">
		<div class="list" v-for="(item, index) in projectModel" :key="index">
			<div class="head_cont">
				<div class="left">
					<img v-lazy src="http://bdd.5ug.com/wwwroot/uploads/api/242-873-583/2020-01-20/5e2524e2e6fc8ee06c375398.png" class="image" alt="">
				</div>
				<div class="right">
					<div class="right-title">{{item.name}}</div>
					<div class="right-info">项目编号：242-873-583</div>
					<div class="right-info">数据中心：</div>
					<div class="right-info">创建时间：{{item.createTime}}</div>
				</div>
				<div class="show-edit">
					<div class="show-edit_box">
						<div class="show-edit_center">
							<div class="edit-cont">
								<div class="preview-edit" @click="previewClick(item)">预览</div>
								<div class="del-edit" @click="delClick(item)">删除</div>
							</div>
							<div class="edit-cont">
								<div class="redact-edit" @click="linkTo(item)">编辑文档</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="list list-edit" @click="addClick">
			<!-- <x-icon name="el-icon-plus" color="#999999" size="20"></x-icon> -->
			<i class="el-icon-plus" style="font-size: 20px;"></i>
			<div class="test">添加书籍</div>
		</div>
		<add-dialog ref="addDialog" @save="save"></add-dialog>
		<el-dialog title="删除书籍" width="750px" :visible.sync="booksVisible">
			<div class="admin-wiki_dialog">
				<el-form ref="form" style="margin-top:15px">
					<el-form-item label="云平台支付密码" :required="true">
						<el-input v-model="payPassword" type="password"></el-input>
						<div class="form-intro">您在阿拉博数平台(www.5ug.com)的支付密码，非当前管理员密码，非平台的登录密码</div>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="booksVisible = false" type="default">取 消</el-button>
				<el-button type="danger" :loading="loading" @click="deleteTheme">确定删除该书籍，不可恢复!</el-button>
			</div>
		</el-dialog>
	</div>
</template>


<script>
	import addDialog from './styles/add_dialog'
	import ala from 'ala'
	export default {
		components: {
			addDialog
		},
		data() {
			return {
				viewModel: null,
				projectModel: null,
				async: false,
				booksVisible: false,
				loading: false,
				modelPara: '',
				payPassword: ''
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var response = await this.$ala.httpGet('api/wikiproject/ViewById')
				if (response) {
					this.viewModel = response
					this.viewModel.userId = this.$ala.urlId()
					this.viewModel.userName = this.$ala.user().name
				}
				var id = ala.urlQuery('id')
				var wikiProject = await this.$ala.httpGet('api/WikiProject/QueryList')
				if (id !== '10000') {
					wikiProject = wikiProject.filter(r => r.publilc !== true)
				}
				if (wikiProject) {
					this.projectModel = wikiProject
				}
				this.async = true
			},
			addClick() {
				this.$refs.addDialog.init(this.viewModel)
			},
			// 跳转页面
			linkTo(item) {
				this.$router.push(`/admin/wiki/edit?id=${item.id}`)
			},
			// 添加电子书籍
			async save() {
				this.$refs.addDialog.loading = true
				var response = await this.$ala.httpPost('Api/WikiProject/QuerySave', this.viewModel)
				if (response) {
					this.$refs.addDialog.save()
					this.init()
					this.$message.success('电子书添加成功')
				}
			},
			delClick(val) {
				this.booksVisible = true
				this.modelPara = val
			},
			// 删除 
			async deleteTheme() {
				this.loading = true
				var para = {
					id: this.modelPara.id,
					userId: this.modelPara.userId,
					createTime: this.modelPara.createTime,
					payPassword: this.payPassword
				}
				var response = await this.$ala.httpDelete('api/WikiProject/QueryDelete', para)
				if (response) {
					this.$message.success('删除成功')
					this.loading = false
					this.booksVisible = false
				} else {
					this.loading = false
				}
			},
			previewClick(val) {
				window.open('/web/wiki?id=' + val.id)
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import "./var.scss";
</style>